<script setup>
import * as echarts from "echarts";
import { onMounted,ref } from "vue";

const roseRef = ref()
onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(roseRef.value);
    // 绘制图表
    myChart.setOption({
        title: {
            text: "日用电量占比",
            x: "20", //标题x坐标
            y: "20", // 标题y坐标
            textStyle: {
                color: "#fff", //标题字体颜色
                fontSize: "15", //标题颜色
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b} :  ({d}%)',
            backgroundColor: 'rgba(6,6,8,1)',
            borderColor: '#060608',
            textStyle: {
                color: '#fff'
            }
        },
        legend: {
            icon: 'rect',
            orient: 'vertical',
            left: 30,
            top: 60,
            bottom: 20,
            itemGap: 20,
            textStyle: {
                color: "#eee",
                fontSize: "12",

            },
        },

        series: [
            {
                type: 'pie',
                radius: [20, 80],
                center: ['70%', '50%'],
                roseType: 'radius',
                itemStyle: {
                    borderRadius: 0
                },
                label: {
                    show: false
                },
                emphasis: {
                    label: {
                        show: false
                    }
                },
                data: [
                    { value: 120, name: '拌合站用电' },
                    { value: 80, name: '碎石场用电' },
                    { value: 60, name: '钢筋厂用电' },
                    { value: 40, name: '其他用电' },

                ]
            },

        ]
    });
});
</script>

<template>
    <div class="column">
        <div ref="roseRef" class="rose"></div>
    </div>
</template>

<style lang="less" scoped>
.column {
    width: 100%;
    height: 100%;

    .rose {
        width: 100%;
        height: 100%;
    }
}
</style>
